<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>销售日报</title>
    <style>

        h1, h2, h3, h4, h5 {
            margin: 0;
            padding: 0;
        }

        /**{*/
        /*    border: 1px solid magenta;*/
        /*}*/
        .line > input {
            display: inline-block;
            margin: 5px;
        }

        #table {
            margin: 0 auto;
            display: table;
            border: 1px solid black;
            width: 80%;
            height: auto;
        }

        .title {
            font-size: 2em;
            border-bottom: 1px solid black;
        }

        #tips-line {
            width: 100%;
        }

        .dateLine {
            border-bottom: 1px solid black;
            height: 5vh;
            line-height: 5vh;
            text-align: center;
        }

        /*按钮*/
        .button {
            display: inline-block;
            min-width: 3vw;
            height: 4vh;
            background: #5bc0de;
            border-radius: 1vh;
            margin: 3px;

            line-height: 4vh;
            text-align: center;
        }

        .button:hover {
            cursor: pointer;
        }

        /*表*/
        .option, .content-line {
            /*border: 1px solid black;*/
            text-align: center;
        }

        .option {
            background: hsl(0, 0%, 95%);
            height: 5vh;
            line-height: 5vh;
        }

        .option h1 {
            display: inline-block;
            width: calc(100% / 12);
            /*border: 1px solid black;*/
            font-size: 1em;
        }

        .line h1 {
            display: inline-block;
            width: calc(100% / 12);
            /*border: 1px solid black;*/
            font-size: 1em;
        }

        .option h2, .line h2 {
            display: inline-block;
            width: calc(100% / 6);
            /*border: 1px solid black;*/
            font-size: 1em;
        }

        .option h3, .line h3 {
            display: inline-block;
            width: calc(100% / 10);
            /*border: 1px solid black;*/
            font-size: 1em;
        }

        .option h4 {
            display: inline-block;
            width: calc(100% / 2);
            /*border: 1px solid black;*/
            font-size: 1em;
        }

        .line h4 {

            display: inline-block;
            width: calc(100% / 2);
            font-size: 1em;
        }

        textarea {
            width: 100%;
            min-height: 8vh;
        }

        .buttonLine > .button {
            margin: 0 auto;
        }


    </style>
</head>
<body>
<div id="table">
    <div class="title">销售日报填写</div>
    <div id="tips-line">
        <div class="dateLine">
            <span>日期：<input type="date"/></span>
            &nbsp;&nbsp;至&nbsp;&nbsp;
            <span><input type="date"/></span>
        </div>
        <div class="buttonLine">
            <!--            <span>销售日报填写</span>-->
            <div class="button">新增</div>
            <div class="button">修改</div>
            <div class="button">删除</div>
            <div class="button">保存</div>
        </div>
        <div class="option">
            <h1>选项</h1>
            <h2>日期</h2>
            <h3>星期</h3>
            <h4>工作内容</h4>
        </div>
    </div>
    <div class="content-line">
        <div class="line">
            <h1><input type="radio"></h1>
            <h2><input type="date"></h2>
            <h3>三</h3>
            <h4><textarea placeholder="具体工作内容,如：
            1、参加部门会议
            2、与客户沟通"></textarea></h4>
        </div>
        <div class="line">
            <h1><input type="radio"></h1>
            <h2><input type="date"></h2>
            <h3>三</h3>
            <h4><textarea placeholder="具体工作内容"></textarea></h4>
        </div>
    </div>


</div>

</body>
</html>